<template>
  <div class="login h-[800px] flex items-center justify-center">
    <login-box class="shadow-lg" @success="onLoginSuccess" />
  </div>
</template>
<script lang="ts" setup>
import LoginBox from './LoginBox.vue';
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
import { useAccountStore  } from '@/store';

const { logout,account } = useAccountStore();

const router = useRouter();

function onLoginSuccess() {

  useAccountStore().profile().then((response) => {
  const { account } = response;
  console.log('login',account)

  user.name = account.name; 
  user.avatar = account.avatar;
  router.push('/exp1/ifpug');
  }) 
}
const showSetting = ref(false);
const user = reactive({
  name: account.name,
  avatar: account.avatar,
  menuList: [
    { title: '设置', key: 'setting', icon: 'SettingOutlined', onClick: () => (showSetting.value = true) },
    { type: 'divider' },
    {
      title: '退出登录',
      key: 'logout',
      icon: 'LogoutOutlined',
        onClick: () => logout().then(() => {
          useAccountStore().clear()
          router.push('/login')
        }),
    },
  ],
});
</script>
<style scoped lang="less"></style>
